<template>
  <!-- 选择店铺 - 列表 -->
	<view class="select-store">
		<view class="filter-box flex">
      <view class="item" @click="cityPopupShow()">
        <text :class="filterIndex===0?'color-FBB000':'color-666'" class="font-32 mr-20">{{ city }}</text>
        <u-icon name="arrow-down-fill" size="20" :color="filterIndex===0?'#FBB000':'#666'"></u-icon>
      </view>
      <view class="item" @click="categoryPopupShow()">
        <text :class="filterIndex===1?'color-FBB000':'color-666'" class="font-32 mr-20">{{ categoryTitle }}</text>
        <u-icon name="arrow-down-fill" size="20" :color="filterIndex===1?'#FBB000':'#666'"></u-icon>
      </view>
    </view>
    
    <!-- 店铺列表 -->
    <view class="store-list-box">
      <view class="item flex flex-ai-c" v-for="(item, index) in storeList" :key="item.id">
        <!-- 单选框 -->
        <view class="btn-radio">
          <i-icon v-show="radioIndex !== index" icon="icontuoyuan" size="40rpx" color="#999999"></i-icon>
          <i-icon v-show="radioIndex === index" icon="icongouxuan" type="m" size="40rpx"></i-icon>
        </view>
        
        <!-- 店铺内容 -->
        <view class="store-content flex flex-ai-c">
          <!-- 店铺图片 -->
          <view class="left-img">
            <image :src="item.img" mode="widthFix" class="img"></image>
          </view>
          
          <!-- 店铺信息 -->
          <view class="middle-cont">
            <view class="font-32 color-333">{{ item.storeName }}</view>
            <view class="company-name font-28 color-666">{{ item.companyName }}</view>
          </view>
          
          <!-- 自营...标签 -->
          <view class="right">
            <view>
              <i-icon icon="iconbao_1" size="40rpx" color="#FBB000"></i-icon>
            </view>
            <view class="tag-zy">自营</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 固定在底部按钮 -->
    <view class="btn-box flex flex-dir-c flex-jc-c">
      <view class="btn">确定</view>
    </view>
    
    <!-- 区域弹窗 -->
    <recom :showdz="cityShow" title="区域" @close="closeCity" @confirmdz="confirmdz"></recom>
    
    <u-popup v-model="categoryShow" mode="bottom" border-radius="30">
      <view class="category-item">
        <view class="title">类别</view>
        
        <view class="list">
          <view class="item" v-for="(item, index) in categoryList" :key="item" @click="selectedCategory(item, index)">
            <text :class="categoryTitle === item?'color-FBB000':''">{{ item }}</text>
          </view>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
  import recom from '@/components/regionComponent.vue'
  
	export default {
    components: {
      recom
    },
		data() {
			return {
				city: '成都市',  // 城市
        categoryTitle: '全部类别',  // 店铺类别
        cityShow: false, // 显示区域选择弹窗
        filterIndex: 0, // 当前点击的筛选
        categoryShow: false, // 显示类别选择弹框
        
        categoryList: [
          '全部类别',
          '4S',
          '汽贸店',
          '自营店',
          '美容/维保',
          '官方主推'
        ],
        storeList: [
          {
            id: 1,
            storeName: '达州荣威4S',
            companyName: '四川某某汽车销售有限公司',
            isSelfSeller: true,
            isGuarantee: true,
            img: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2771978851,2906984932&fm=26&gp=0.jpg'
          }
        ],  // 店铺列表
        
        radioIndex: 0,  // 单选标识
			}
		},
    
    methods: {
      // 点击显示区域弹框
      cityPopupShow() {
        this.cityShow = true
        this.filterIndex = 0
      },
      
      // 选择了区域
      confirmdz(e) {
        this.province = e.province.label
        this.city = e.city.label
        this.showdz = false
      },
      
      // 选择区域城市弹框关闭回调事件
      closeCity() {
        this.cityShow = false
      },
      
      // 点击显示类别筛选弹框
      categoryPopupShow() {
        this.categoryShow = true
        this.filterIndex = 1
      },
      
      // 选择类别
      selectedCategory(item, index) {
        this.categoryTitle = item
        this.categoryShow = false
      }
    }
	}
</script>

<style lang="scss" scoped>
.select-store {
  min-height: 100vh;
  background: #F6F6F6;
  padding-bottom: 180rpx;
}

// 筛选
.filter-box {
  height: 90rpx;
  line-height: 90rpx;
  background: #FFFFFF;
  
  .item {
    width: 50%;
    text-align: center;
  }
}

// 店铺列表
.store-list-box {
  padding: 0 24rpx;
  
  .item {
    margin-top: 22rpx;
  }
  
  .store-content {
    flex: 1;
    padding: 30rpx 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    
    // 左边店铺图片
    .left-img {
      width: 200rpx;
      height: 134rpx;
      border-radius: 5rpx;
      overflow: hidden;
      display: flex;
      align-items: center;

      .img {
        width: 100%;
      }
    }
    
    // 中间 - 店铺内容
    .middle-cont {
      flex: 1;
      
      .company-name {
        padding-right: 6rpx;
        margin-top: 30rpx;
      }
    }
    
    .right {
      .tag-zy {
        width: 84rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin-top: 16rpx;
        background: linear-gradient(-90deg, #FDD421, #FFE23E);
        font-size: 24rpx;
        border-radius: 8rpx;
        text-align: center;
      }
    }
  }
}


// 类别弹框
.category-item {
  .title {
    height: 98rpx;
    line-height: 98rpx;
    font-size: 36rpx;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  
  .list {
    .item {
      padding: 20rpx;
      text-align: center;
      font-size: 32rpx;
      color: #666;
    }
  }
}

// 底部按钮
.btn-box {
  position: fixed;
  bottom: 0;
  z-index: 9;
  width: 100%;
  height: 150rpx;
  padding: 0 24rpx;
  background: #FFFFFF;
  
  .btn {
    height: 88rpx;
    line-height: 88rpx;
    background: linear-gradient(-90deg, #FBD220, #FFE23E);
    border-radius: 44rpx;
    text-align: center;
    font-size: 32rpx;
  }
}
</style>
